<template>
  <span class="span--title">选定查询范围</span>
  <div class="demo-date-picker">
    <div class="block">
      <!-- <span class="demonstration">With quick options</span> -->
      <el-date-picker v-model="value" type="monthrange" unlink-panels range-separator="-" start-placeholder="开始月份"
        end-placeholder="结束月份" @change="handleChange" :shortcuts="shortcuts" style="margin-bottom: 20px" />
    </div>
  </div>
  <div class="demo-progress">
    <span class="span--title">选定查询范围</span>
    <el-progress type="dashboard" :percentage="percentMonth">
      <template #default="{ percentage }">
        <span class="percentage-value">{{ percentage }}%</span>
        <span class="percentage-label">期间完成率</span>
      </template>
    </el-progress>
  </div>

  <div class="echarts" ref="echartsRef" :style="{
    width: '400px',
    height: '300px',
  }"></div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  ref,
  reactive,
  toRef,
  toRefs,
  watch,
} from "vue";
import count from "@/stores/usercount";
import { storeToRefs } from "pinia";
import * as echarts from "echarts";
import { ElDatePicker } from "element-plus";

export default defineComponent({
  // props: ["shortcuts"],
  setup(props, ctx) {
    const value = ref("");
    // const shortcuts = props.shortcuts;
    const store = count();
    // const getAll = () => {
    //   store.getAll();
    // };
    // getAll();
    const { dataInfo } = storeToRefs(store);
    const todo = store.todolist;
    const startDate = ref(new Date());
    const endDate = ref(new Date());
    const data = ref(dataInfo);
    // let perMonth = (data.value.percentMonth * 100).toFixed(0);
    // let countLife = 0;
    // let countWork = 0;
    // let countStudy = 0;
    // let countEnter = 0;
    // let data2 = reactive({
    //   countLife,
    //   countWork,
    //   countStudy,
    //   countEnter,
    // });
    const data3 = reactive({
      arr: [0, 0, 0, 0],
    });
    const percentData = reactive({
      arr: [0, 0],
    });
    // let perMonth = percentData[0] / (percentData[0] + percentData[1]);
    // let perMonth = ref(1);
    // let percentMonth = String(perMonth.value);
    let percentMonth = ref("0");
    // const toRef_percentMonth = toRef(percentMonth)

    const shortcuts = [
      {
        text: "查询本月",
        value: [new Date(), new Date()],
      },
      {
        text: "查询本年",
        value: () => {
          const end = new Date();
          const start = new Date(new Date().getFullYear(), 0);
          return [start, end];
        },
      },
      {
        text: "查询过去6个月",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setMonth(start.getMonth() - 6);
          return [start, end];
        },
      },
    ];

    const getYearMonth = (date) => {
      let yearMonth;
      // const date = data ? new Date(data) : new Date();
      let month = date.getMonth() + 1;
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      yearMonth = date.getFullYear() + "-" + month;
      return yearMonth;
    };

    const handleChange = (val: Date[]) => {
      const reg = new RegExp("-");
      let sh = 0;
      let gz = 0;
      let xx = 0;
      let yl = 0;
      let finish = 0;
      let unfinish = 0;
      // console.log(sh, gz, xx, yl, finish, unfinish);
      startDate.value = val[0];
      endDate.value = val[1];
      // console.log(startDate);
      // console.log(endDate);
      // console.log(getYearMonth(startDate.value).replace(reg, ""));
      // console.log(getYearMonth(endDate.value).replace(reg, ""));

      for (let i = 0; i < todo.length; i++) {
        if (
          todo[i].startDate.slice(0, 7).replace(reg, "") <=
          getYearMonth(endDate.value).replace(reg, "") &&
          todo[i].startDate.slice(0, 7).replace(reg, "") >=
          getYearMonth(startDate.value).replace(reg, "")
        ) {
          switch (todo[i].status) {
            case 0:
              unfinish++;
              console.log(unfinish);
              console.log(todo[i]);
              break;
            case 1:
              finish++;
              console.log(finish);
              console.log(todo[i]);
              break;
          }
          percentData.arr[0] = unfinish;
          percentData.arr[1] = finish;
        } else {
          percentMonth.value = "--"
        }
      }

      for (let i = 0; i < todo.length; i++) {
        console.log(todo[i].startDate.slice(0, 7).replace(reg, ""));
        if (
          todo[i].startDate.slice(0, 7).replace(reg, "") <=
          getYearMonth(endDate.value).replace(reg, "") &&
          todo[i].startDate.slice(0, 7).replace(reg, "") >=
          getYearMonth(startDate.value).replace(reg, "")
        ) {
          console.log(todo[i].type);

          switch (todo[i].type) {
            case "生活":
              sh++;

              // data2.countLife + 1;
              break;
            case "工作":
              gz++;

              // data2.countWork = 2;
              console.log("hello");
              console.log(data3.arr);
              break;
            case "学习":
              xx++;

              // data2.countStudy + 1;
              break;
            case "娱乐":
              yl++;

              // data2.countEnter + 1;
              break;
          }
          data3.arr[0] = sh;
          data3.arr[1] = gz;
          data3.arr[2] = xx;
          data3.arr[3] = yl;

          console.log(todo[i]);
        } else {
          data3.arr[0] = sh;
          data3.arr[1] = gz;
          data3.arr[2] = xx;
          data3.arr[3] = yl;
        }
        // if(todo[i].startDate.slice(0,7))
      }

      // console.log(endDate);
    };

    const computedData = computed(() => { });
    // const countLife1 = computed(() => {
    //   data2.countWork = 2;
    // });
    console.log(todo);
    console.log(data);
    const echartsRef = ref<HTMLElement>();
    watch(percentData, (newValue, oldValue) => {
      console.log("watch2触发", newValue, oldValue);
      // percentMonth.value = "2";

      console.log(percentData.arr[0]);
      console.log(percentData.arr[1]);
      percentMonth.value = String(
        (
          (percentData.arr[1] * 100) /
          (percentData.arr[0] + percentData.arr[1])
        ).toFixed(0)
      );
      // percentMonth.value = String((1 * 100) / 2);
    });

    watch(data3, (newValue, oldValue) => {
      console.log("watch触发", newValue, oldValue);
      const myEcharts = echarts.init(echartsRef.value!);
      //要操作的配置
      const option = {
        title: {
          text: "各类型待办事项统计",
          left: "center",
          top: 10,
          fontWeight: "bold",
          textStyle: {
            color: "#000",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "93%",
          left: "center",
        },
        series: [
          {
            name: "类型",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "25",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: data3.arr[0], name: "生活" },
              { value: data3.arr[1], name: "工作" },
              { value: data3.arr[2], name: "学习" },
              { value: data3.arr[3], name: "娱乐" },
            ],
          },
        ],
      };
      //设置配置
      myEcharts.setOption(option, true);
    });

    onMounted(() => {
      //初始化echarts实例init（ dom ，'主题' ，其余参数如：{ renderer:'svg' }）
      const myEcharts = echarts.init(echartsRef.value!);
      //要操作的配置
      const option = {
        title: {
          text: "各类型待办事项统计",
          left: "center",
          top: 10,
          fontWeight: "bold",
          textStyle: {
            color: "#000",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "93%",
          left: "center",
        },
        series: [
          {
            name: "类型",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "25",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: data3.arr[0], name: "生活" },
              { value: data3.arr[1], name: "工作" },
              { value: data3.arr[2], name: "学习" },
              { value: data3.arr[3], name: "娱乐" },
            ],
          },
        ],
      };
      //设置配置
      myEcharts.setOption(option, true);
    });

    return {
      echartsRef,
      shortcuts,
      value,
      handleChange,
      data3,
      percentData,
      // perMonth,
      percentMonth,
    };
  },
});
</script>

<style scoped>
.span--title {
  font-size: 18px;
  font-weight: 800;
  margin-block: 20px;
}

.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}

.demo-progress {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
</style>
